@use "../../variables" as *;

$side-bar-enter-duration: var(--svc-side-bar-enter-duration, 500ms);
$side-bar-leave-duration: var(--svc-side-bar-leave-duration, 500ms);

$cubic-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
$reverse-cubic-ease-out: cubic-bezier(0.32, 0, 0.67, 0);
.svc-side-bar__container {
  flex-direction: column;
  display: flex;
  position: relative;
  width: var(--ctr-property-grid-width, var(--sjs-size-x60));
  min-width: var(--ctr-property-grid-min-width, var(--sjs-size-x40));
  max-width: var(--sjs-size-x90);
  height: 100%;
  background: var(--ctr-property-grid-background-color, var(--sjs-layer-1-background-500, #ffffffff));
  border-inline-start: var(--ctr-property-grid-border-width-left, var(--sjs-stroke-x1)) solid
    var(--ctr-property-grid-border-color, var(--sjs-border-25, #d4d4d4ff));
    box-sizing: content-box;
}

.svc-side-bar--narrow {
  .svc-side-bar__container {
    max-width: var(--sjs-size-x64);
  }
}

.svc-side-bar__wrapper {
  height: 100%;
}

.svc-side-bar__container .svc-resizer {
  width: 3px;
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  background-color: transparent;
  cursor: e-resize;
}

.svc-resizer-west {
  left: 0;
}

.svc-resizer-east {
  right: 0;
}

.svc-side-bar__container-header {
  background: var(--ctr-property-grid-header-background-color, var(--sjs-layer-1-background-500, #ffffffff));
  box-shadow: inset 0px -2px 0px var(--ctr-property-grid-header-border-color, var(--sjs-primary-background-500, #19b394ff));
  // text-align: right;
  display: flex;
  padding: var(--ctr-property-grid-header-padding-top, var(--sjs-spacing-x150)) var(--ctr-property-grid-header-padding-right, var(--sjs-spacing-x2))
  var(--ctr-property-grid-header-padding-bottom, var(--sjs-spacing-x150)) var(--ctr-property-grid-header-padding-left, var(--sjs-spacing-x2));
}

.svc-side-bar__container-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  overflow-y: auto;
  background-color: var(--ctr-property-grid-background-color, var(--sjs-layer-1-background-500, #ffffffff));
}

// .svc-side-bar__container-container {
//   display: flex;
//   flex-direction: column;
//   align-items: flex-start;
//   width: 100%;
//   padding: 0px calcSize(2) calcSize(3);
//   box-sizing: border-box;
//   background: $background-dim;
//   box-shadow: inset 0px -1px 0px var(--sjs-border-default, var(--border, #d6d6d6));
// }

.svc-side-bar__container-title {
  @include ctrDefaultFont;

  display: flex;
  flex-grow: 1;
  flex-shrink: 0;
  justify-content: flex-end;
  padding: var(--ctr-menu-toolbar-button-padding-top, var(--sjs-spacing-x1))
    var(--ctr-menu-toolbar-button-padding-right, var(--sjs-spacing-x1)) var(--ctr-menu-toolbar-button-padding-bottom, var(--sjs-spacing-x1))
    var(--ctr-menu-toolbar-button-padding-left, var(--sjs-spacing-x1));
  color: var(--ctr-menu-toolbar-button-text-color, var(--sjs-layer-1-foreground-100, #000000e6));
}

.svc-side-bar__container-actions {
  width: 100%;
  box-sizing: border-box;
  .sv-action-bar {
    justify-content: flex-end;
    padding: 0;
  }
  
  .sv-action-bar-item {
    transition: background-color $creator-transition-duration;
  }
  
  .sv-action-bar-item:not(.sv-action-bar-item--pressed):enabled {
    border-radius: var(--ctr-menu-toolbar-button-corner-radius, var(--sjs-corner-radius-x1));

    &:focus {
      background: var(--ctr-menu-toolbar-button-background-color-pressed, var(--sjs-layer-1-background-400, #f5f5f5ff));
    }
    
    &:hover {
      background: var(--ctr-menu-toolbar-button-background-color-hovered, var(--sjs-layer-1-background-400, #f5f5f5ff));
    }
  }
  
  .sv-action-bar-item--pressed:not(.sv-action-bar-item--active) {
    background: var(--ctr-menu-toolbar-button-background-color-pressed, var(--sjs-layer-1-background-400, #f5f5f5ff));
  }
  
  .sv-action-bar-item__title {
    color: var(--ctr-menu-toolbar-button-text-color, var(--sjs-layer-1-foreground-100, #000000e6));
  }
  
  .sv-action-bar-item__icon use {
    fill: var(--ctr-menu-toolbar-button-icon-color, var(--sjs-layer-1-foreground-75, #000000bf));
  }
}

.svc-flex-row.svc-side-bar__wrapper {
  width: auto;
  height: 100%;
  background-color: transparent;
}
.svc-side-bar__container {
  background-color: var(--ctr-property-grid-form-background-color, var(--sjs-layer-1-background-500, #ffffffff));
}

.svc-side-bar {
  height: 100%;
}

$tabs-width: calc(var(--ctr-menu-toolbar-button-padding-left, var(--sjs-spacing-x1)) + var(--ctr-menu-toolbar-button-padding-right, var(--sjs-spacing-x1)) + var(--ctr-menu-toolbar-button-icon-width, var(--sjs-font-size-x3)) + var(--ctr-property-grid-tabs-padding-left, var(--sjs-spacing-x150)) + var(--ctr-property-grid-tabs-padding-right, var(--sjs-spacing-x150)));

.svc-side-bar--flyout {
  z-index: 1000;
  .svc-side-bar__shadow {
    background-color: var(--ctr-popup-haze-background-color, var(--sjs-special-haze, #cceeee59));
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    inset-inline-start: 0;
  }
  .svc-side-bar__container-wrapper {
    border-left: none;
    position: absolute;
    inset-inline-end: 0;
    height: 100%;
    max-width: 100%;
  }
  &.svc-side-bar--side-area .svc-side-bar__container-wrapper {
    max-width: calc(100% - #{$tabs-width});
    inset-inline-end: $tabs-width;
  }
  .svc-side-bar__container { 
    display: flex;
    max-width: 100%;
  }
  .svc-sidebar-tabs {
    z-index: 1;
  }
}

.svc-side-bar--mobile {
  .svc-side-bar__wrapper {
    position: absolute;
    width: 100%;
    position: absolute;
    inset-inline-end: 0;
    z-index: 1000;
  }
  .svc-side-bar__container-wrapper {
    position: static;
    flex-grow: 1;
  }

  .svc-side-bar__container {
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
  }
}
@keyframes flyoutSideBarShadowFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.75;
  }
}
@keyframes sideBarMoveIn {
  from {
    width: 0;
    overflow: hidden;
  }
  to {
    width: var(--animation-width);
    overflow: hidden;
  }
}

.svc-side-bar--enter,
.svc-side-bar--leave
 {
  animation-fill-mode: forwards;
  animation-name: empty;
  animation-duration: var(--animation-duration);
  .svc-side-bar__container {
    max-width: var(--animation-width);
  }
}
.svc-side-bar--enter {
  --animation-duration: #{$side-bar-enter-duration};
  --animation-direction: normal;
  --animation-timing-function: #{$cubic-ease-out};
}
.svc-side-bar--leave {
  --animation-duration: #{$side-bar-leave-duration};
  --animation-direction: reverse;
  --animation-timing-function: #{$reverse-cubic-ease-out};
}
.svc-side-bar--enter,
.svc-side-bar--leave {
  .svc-side-bar__container,
  .svc-side-bar__container-wrapper
  {
    animation-fill-mode: forwards;
    animation-duration: var(--animation-duration);
    animation-direction: var(--animation-direction);
    animation-timing-function: var(--animation-timing-function);
  }
  .svc-side-bar__container-wrapper {
    animation-name: sideBarMoveIn;
  }
}

.svc-side-bar--flyout.svc-side-bar--enter,
.svc-side-bar--flyout.svc-side-bar--leave {
  .svc-side-bar__shadow {
    animation-name: flyoutSideBarShadowFadeIn;
    animation-fill-mode: forwards;
    animation-duration: var(--animation-duration);
    animation-direction: var(--animation-direction);
    animation-timing-function: var(--animation-timing-function);
  }
}
.svc-side-bar--mobile {
  &.svc-side-bar--leave, &.svc-side-bar--enter {
    .svc-side-bar__container,
    .svc-side-bar__container-wrapper {
      animation: none;
      min-width: var(--animation-width);
    }
    .svc-side-bar__container-wrapper {
      min-width: var(--animation-width);
    }
    .svc-side-bar__wrapper {
      animation-name: sideBarMoveIn;
      animation-fill-mode: forwards;
      animation-duration: var(--animation-duration);
      animation-direction: var(--animation-direction);
      animation-timing-function: var(--animation-timing-function);
    }
  }
}

.svc-creator--disable-animations {
  .svc-side-bar--leave,
  .svc-side-bar--enter {
    animation: none;
  }
}



.sv-action--object-selector {
  max-width: 70%;

  .sv-action-bar-item {
    flex-shrink: 1;
    height: auto;
  }

  .sv-action-bar-item__title {
    @include ctrDefaultFont;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.svc-full-container.svc-creator__side-bar--left {
  flex-direction: row-reverse;

  .svc-side-bar__wrapper {
    flex-direction: row-reverse;
  }

  .svc-side-bar__container-header .sv-action-bar {
    flex-direction: row-reverse;
  }

  .sv-action--object-selector {
    justify-content: flex-start;
    flex: 1;
    display: flex;
  }
}

[dir="rtl"],
[style*="direction:rtl"],
[style*="direction: rtl"],
.svc-full-container.svc-creator__side-bar--left {
  .svd-grid-hide .sv-svg-icon,
  .svd-grid-expand .sv-svg-icon {
    transform: rotate(180deg);
  }
}
.svc-full-container.svc-creator__side-bar--left {
  .svc-side-bar__container-wrapper, .svc-side-bar__wrapper {
    inset-inline-start: 0;
    inset-inline-end: unset;
  }
  .svc-side-bar--side-area .svc-side-bar__container-wrapper {
    inset-inline-start: $tabs-width;
  }
}

.svd-grid-hide {
  margin-inline-end: auto;

  .sv-action-bar-item--icon {
    padding: var(--ctr-menu-toolbar-button-padding-top, var(--sjs-spacing-x1))
      var(--ctr-menu-toolbar-button-padding-right, var(--sjs-spacing-x1))
      var(--ctr-menu-toolbar-button-padding-bottom, var(--sjs-spacing-x1))
      var(--ctr-menu-toolbar-button-padding-left, var(--sjs-spacing-x1));
  }
  .sv-svg-icon {
    width: var(--ctr-menu-toolbar-button-icon-width, var(--sjs-font-size-x3));
    height: var(--ctr-menu-toolbar-button-icon-height, var(--sjs-font-size-x3));
  }
}

.svc-side-bar {
  .svc-toolbox {
    width: 100%;
  }
  .svc-toolbox .sv-scroll__scroller {
    direction: initial;
  }
  .svc-toolbox .sv-scroll__scrollbar {
    inset-inline-end: 0;
    inset-inline-start: initial;
  }
  .svc-toolbox__category-separator--search {
    display: none
  }
  .svc-toolbox__panel {
    width: unset;
    border: none;
  }
}